import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {
  decrement,
  increment,
  incrementByAmount,
  increment100IfOddAsync,
} from '../store/counter';
// vite已集成css module 只要新建xxx.module.less即可
import styles from './index.module.less';

export default function Redux() {
  const { value } = useSelector((state) => state.counter)
  const { age } = useSelector((state) => state.person)
  const dispatch = useDispatch();
  const [incrementAmount, setIncrementAmount] = useState(2);

  return (
    <div>
      <div className={styles.row}>
        <button className={styles.button} onClick={() => dispatch(decrement())}>-</button>
        <span className={styles.value}>{value}</span>
        <button className={styles.button} onClick={() => dispatch(increment())}>+</button>
      </div>
      <div className={styles.row}>
        <input className={styles.textbox} value={incrementAmount} onChange={(e) => setIncrementAmount(Number(e.target.value))}/>
        <button className={styles.button} onClick={() => dispatch(incrementByAmount(incrementAmount))}>加这个数</button>
      </div>
      <div className={styles.row}>
        <button className={styles.asyncButton} onClick={() => dispatch(increment100IfOddAsync())}>如果单数，异步加100</button>
      </div>
      <div className={styles.row}>
        在counterSlice中访问personSlice的state和actions，age：<strong className={styles.text}>{age}</strong>
      </div>
    </div>
  );
}
